.App {
  text-align: center;
}

.page {
  height: 50vh;
  width: 100%;
  
}

.home {
  background-color: green;
  transition: all 1s;
}

.about {
  background-color: red;
}


/* test css  */
.box-enter{
  opacity: 1;
  transform: scale(1)
}

.box-enter-active{
  opacity: 0.6;
  transform: scale(0.6);
  transition: all 1000ms;
}

.box-enter-done{
  opacity: 0;
  transform: scale(0);
}

/* .box-exit {
  opacity: 1;
  transform: scale(1);
}

.box-exit-active {
  opacity: 0;
  transform: scale(.6);
  transition: all 1000ms
}
.box-exit-done {
  opacity: 0;
  transform: scale(0);
} */





.router-wrapper {
  overflow: hidden;
}

/**
 * 右侧淡入，右侧淡出
 */
.forward-from-right-enter {
  z-index: 2;
  opacity: 0;
  transform: translateX(100%);
}

.forward-from-right-enter-active {
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}

.forward-from-right-exit {
  z-index: 1;
  opacity: 1;
}

.forward-from-right-exit-active {
  z-index: 1;
  opacity: .3;
  transition: all 500ms;
}

.back-to-right-enter {
  z-index: 1;
  opacity: .3;
}

.back-to-right-enter-active {
  z-index: 1;
  opacity: 1;
  transform: translateX(0);
  transition: all 500ms;
}

.back-to-right-exit {
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}

.back-to-right-exit-active {
  z-index: 2;
  opacity: 0;
  transform: translate(100%);
  transition: all 500ms;
}

/**
 * 下方淡入，下方淡出
 */
.forward-from-bottom-enter {
  z-index: 2;
  opacity: 0;
  transform: translateY(100%);
}

.forward-from-bottom-enter-active {
  z-index: 2;
  opacity: 1;
  transform: translateY(0);
  transition: all 500ms;
}

.forward-from-bottom-exit {
  z-index: 1;
  opacity: 1;
}

.forward-from-bottom-exit-active {
  z-index: 1;
  opacity: .3;
  transition: all 500ms;
}

.back-to-bottom-enter {
  z-index: 1;
  opacity: .3;
}

.back-to-bottom-enter-active {
  z-index: 1;
  opacity: 1;
  transition: all 500ms;
}

.back-to-bottom-exit {
  z-index: 2;
  opacity: 1;
  transform: translateY(0);
}

.back-to-bottom-exit-active {
  z-index: 2;
  opacity: 0;
  transform: translateY(100%);
  transition: all 500ms;
}
